<!--
 * @Descripttion: 登录页面
 * @version: 
 * @Author: lhl
 * @Date: 2024-01-09 11:38:00
 * @LastEditors: lhl
 * @LastEditTime: 2024-01-18 09:59:15
-->
<template>
  <div class="login-warp">
    <div class="login-content animate__animated animate__fadeInLeft">
      <div class="login-form w-1/3 bg-white">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finish="onFinish"
          :rules="rules"
        >
          <h1 class="title text-center font-bold pb-4 text-blue-500">Vue3 管理系统</h1>
          <a-form-item label="用户名" name="username">
            <a-input v-model:value="formState.username" placeholder="请输入用户名(admin)">
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item label="密码" name="password">
            <a-input-password v-model:value="formState.password" placeholder="请输入密码(Aa123456)">
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item label="验证码" name="verificationCode">
            <a-input v-model:value="formState.verificationCode" placeholder="请输入验证码">
              <template #prefix>
                <MailOutlined class="site-form-item-icon" />
              </template>
              <template #suffix>
                <img :src="captchaImg" class="absolute right-0 h-full cursor-pointer" @click="handleSetCaptcha" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item name="remember" :wrapper-col="{ offset: 6, span: 16 }">
            <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
            <a-button type="primary" html-type="submit" class="w-full">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons-vue'

import { getCaptcha } from '~api/login/login'
import { LoginParams } from '~api/login/type'
// 验证码 默认图
import captchaIcon from '~assets/img/captcha.png'
const captchaImg = ref(captchaIcon)

const rules = {
  username: [{ required: true, message: '请输入用户名' }],
  password: [{ required: true, message: '请输入密码' }],
  verificationCode: [{ required: true, message: '请输入验证码' }]
}

const formState = reactive<LoginParams>({
  username: '',
  password: '',
  verificationCode: '',
  remember: true
})
const onFinish = (values: any) => {
  console.log('Success:', values)
}

const handleSetCaptcha = async () => {
  try {
    const { code, result } = await getCaptcha({})
    if (code === 0) {
      captchaImg.value = result
    }
  } catch (e) {
    console.log(e)
  }
}
handleSetCaptcha()
</script>

<style lang="scss" scoped>
.login-warp {
  height: 100%;
  background: url('~assets/img/login-bg.jpg') no-repeat center center;
  background-size: 100% 100%;
  .login-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
  }
}
</style>
